<template>
	<view>
		<image v-if="img && isShowImagee" :src="img" mode="widthFix" style="width: calc(100% - 40rpx);height: 700rpx;border-radius: 10px;margin: 0 20rpx;" show-menu-by-longpress></image>
		<l-painter v-if="!img" :css="`width: 600rpx;height: 960rpx;`" isCanvasToTempFilePath
			@success="handleSuccess" custom-style="position: fixed; left: 200%">
			<l-painter-image :src="config.poster"
				css="position:absolute; width: 600rpx;height: 960rpx;object-fit: cover; border-radius: 20rpx;" />
			<l-painter-view
				:css="'position:absolute;display: inline-block;height: 180rpx;border-radius: 14rpx;background-color: #FFF; bottom: ' + (config.bottom||10) +'rpx;right:' + (config.right||10) +'rpx'">
					<!-- #ifdef H5 || APP-PLUS -->
					<l-painter-qrcode :css="'width: ' + (config.width||180)  + 'rpx; height: ' + (config.height||180) + 'rpx'" :text="config.link">
					</l-painter-qrcode>
					<!--  #endif -->
					<!-- #ifdef MP -->
					<l-painter-image :src="config.qrCode" :css="'width: ' + (config.width||180)  + 'rpx; height: ' + (config.height||180) + 'rpx'" />
					<!--  #endif -->
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>
	export default {
		name: "share-poster",
		props: {
			config: {
				type: Object,
				default: () => ({})
			},
			goodsId: {
				type: [Number, String],
				default: ''
			},
			qrcode: {
				type: [String],
				default: ''
			},
			isShowImagee: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				img:'',
			};
		},
		created() {
		},
		methods: {
			handleSuccess(val) {
				if(!this.isShowImagee){
					this.$emit('loaderSuccess',val)
				}else{
					this.img = val
				}
			}
		}
	}
</script>

<style>

</style>
